import 'package:flutter/material.dart';
import 'package:crm/constant/constant.dart';
import 'package:crm/viewModel/Login/login_view_model.dart';

class LoginMainSection extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => LoginMainSectionState();
}

class LoginMainSectionState extends State<LoginMainSection> {
  // 储存用户输入的值
  String _phone = '';
  String _pass = '';

  //创建焦点 用户输入框焦点切换
  FocusNode _passTextFieldNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    // 输入框管理器
    TextEditingController _phoneController = TextEditingController.fromValue(
      TextEditingValue(
        text: _phone,
        selection: TextSelection.fromPosition(
          TextPosition(
              affinity: TextAffinity.downstream, offset: _phone.length),
        ),
      ),
    );
    TextEditingController passController = TextEditingController.fromValue(
      TextEditingValue(
        text: _pass,
        selection: TextSelection.fromPosition(
          TextPosition(affinity: TextAffinity.downstream, offset: _pass.length),
        ),
      ),
    );

    /// 账号输入框
    Widget _phoneSection() {
      return Container(
        child: Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(right: 10.0, left: 10.0),
              child: GestureDetector(
                onTap: () {},
                child: Row(
                  children: <Widget>[
                    Text(
                      '+86',
                      style: TextStyle(
                          color: AppColors.MainColor,
                          fontSize: AppFontSizes.Font16,
                          fontFamily: AppFontFamilies.PingFangSC,
                          fontWeight: FontWeight.w500),
                    ),
                    Icon(
                      Icons.expand_more,
                      color: AppColors.MainColor,
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              child: TextField(
                onChanged: (str) {
                  _phone = str;
                },
                controller: _phoneController,
                onEditingComplete: () =>
                    FocusScope.of(context).requestFocus(_passTextFieldNode),
                // 切换焦点到passTextField
                textInputAction: TextInputAction.next,
                decoration: InputDecoration(
                  hintText: '输入手机号',
                  border: InputBorder.none,
                  hintStyle: TextStyle(
                      color: AppColors.PlaceholderTextColor,
                      fontSize: AppFontSizes.Font16),
                  suffixIcon: IconButton(
                    icon: Icon(Icons.clear, color: Colors.black45),
                    onPressed: () {
                      _phoneController.clear();
                    },
                  ),
                ),
                style: TextStyle(
                  color: AppColors.TextColor,
                  fontSize: AppFontSizes.Font16,
                ),
              ),
            ),
          ],
        ),
        padding: EdgeInsets.all(0.0),
        width: AppScreen.setWidth(318),
        height: 44.0,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: AppColors.LineColor,
              width: 1.0,
            ),
          ),
        ),
      );
    }

    /// 密码输入框
    Widget _passSection() {
      return Container(
        child: TextField(
          onChanged: (str) {
            _pass = str;
          },
          controller: passController,
          onEditingComplete: () {
            print('onEditingComplete');
            FocusScope.of(context).requestFocus(FocusNode());
            // 调用登录方法
            LoginVM().login(context, _phone, _pass);
          },
          focusNode: _passTextFieldNode,
          textInputAction: TextInputAction.done,
          decoration: InputDecoration(
            hintText: '请输入正确的密码',
            border: InputBorder.none,
            hintStyle: TextStyle(
              color: AppColors.PlaceholderTextColor,
              fontSize: AppFontSizes.Font16,
            ),
            suffixIcon: IconButton(
              icon: Icon(Icons.clear, color: Colors.black45),
              onPressed: () {
                passController.clear();
              },
            ),
          ),
          style: TextStyle(
            color: AppColors.TextColor,
            fontSize: AppFontSizes.Font16,
          ),
          obscureText: true,
        ),
        padding: EdgeInsets.only(left: 10.0),
        width: AppScreen.setWidth(318),
        height: 44.0,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: AppColors.LineColor,
              width: 1.0,
            ),
          ),
        ),
      );
    }

    /// 忘记密码、切换登录方式按钮区域
    Widget _forgetPasswordAndChangeLoginModeSection() {
      return Container(
        // 忘记密码  切换登录方式
        margin: EdgeInsets.only(top: 15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            GestureDetector(
                onTap: () {
                  print('忘记密码');
                },
                child: Text(
                  '忘记密码',
                  style: TextStyle(
                    color: Color.fromARGB(255, 31, 140, 235),
                    fontSize: 13.0,
                  ),
                )),
            GestureDetector(
              onTap: () {
                print('切换登录方式');
              },
              child: Text(
                '通过短信验证码登录',
                style: TextStyle(
                  color: Color.fromARGB(255, 31, 140, 235),
                  fontSize: 13.0,
                ),
              ),
            ),
          ],
        ),
        width: AppScreen.setWidth(318),
        height: 44.0,
      );
    }

    ///登录、注册按钮
    Widget _loginAndRegisterButtonSection() {
      return Container(
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(
                left: 22.0,
                right: 22.0,
              ),
              child: MaterialButton(
                child: Text(
                  "登录",
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  FocusScope.of(context).requestFocus(FocusNode());
                  LoginVM().login(context, _phone, _pass);
                },
              ),
              width: AppScreen.setWidth(318),
              height: 44.0,
              decoration: BoxDecoration(
                color: _pass.length > 0
                    ? Color.fromARGB(255, 31, 140, 235)
                    : Color.fromARGB(255, 223, 223, 223),
                borderRadius: BorderRadius.all(
                  const Radius.circular(22.0),
                ),
              ),
            ),
            Container(
              width: AppScreen.setWidth(318),
              height: 44.0,
              margin: EdgeInsets.only(top: 12),
              padding: EdgeInsets.only(
                left: 22.0,
                right: 22.0,
              ),
              decoration: BoxDecoration(
                border: Border.all(
                  width: 1,
                  color: AppColors.MainColor,
                ),
                borderRadius: BorderRadius.circular(22),
              ),
              child: MaterialButton(
                child: Text(
                  "注册",
                  style: TextStyle(
                    color: AppColors.MainColor,
                  ),
                ),
                onPressed: () {},
              ),
            ),
          ],
        ),
      );
    }

    return Container(
      margin: EdgeInsets.only(top: 35.0),
      child: Column(
        children: <Widget>[
          _phoneSection(),
          _passSection(),
          _forgetPasswordAndChangeLoginModeSection(),
          _loginAndRegisterButtonSection(),
        ],
      ),
    );
  }
}
